<template>
  <div class="view-container">
    <header-module :left-custom="true" :padding="true">
      <template #left-con>
        <div>
          <span style="font-size: 16px; margin-right: 20px">
            {{ fromData?.val?.distributeInfoDetail?.distributeName }}
          </span>
        </div>
      </template>
      <template #btn>
        <el-button class="border-btn" size="small" @click="handlBack">返回</el-button>
      </template>
    </header-module>
    <div style="background-color: white;padding-top: 20px"/>
    <div class="main-content">
      <div class="list-container">
        <el-form :inline="true" class="filter-form-inline" label-position="left" size="small">
          <el-row :gutter="40">
            <el-col :lg="8" :xs="4">
              <el-form-item label="商品名称：">
                <span> {{ fromData?.val?.productInfoDetail.productName }}</span>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xs="4">
              <el-form-item label="通用名称：">
                <span> {{ fromData?.val?.productInfoDetail.productPopularName }}</span>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xs="4">
              <el-form-item label="生产厂家：">
                <span> {{ fromData?.val?.productInfoDetail.producer }}</span>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xs="4">
              <el-form-item label="批准文号：">
                {{ fromData?.val?.productInfoDetail?.approvalNumber }}
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xs="4">
              <el-form-item label="包装规格：">
                {{ fromData?.val?.productInfoDetail?.packSpecs }}
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <table-view :cell-style="cellStyle" :data="tableData" border header-cell-class-name="table-header"
                    @row-click="aloneClick">
          <el-table-column align="center" label="序号" type="index" width="50"/>
          <el-table-column align="center" label="记录时间" prop="index">
            <template #default="{row}">
              {{ dateFormat("yyyy-mm-dd HH:MM:SS", row?.createdAt) }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="业务类型" prop="index">
            <template #default="{row}">
              <span v-if="row.drpType ==='receive'">发货</span>
              <span v-if="row.drpType === 'out'">配送</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="数量(盒)" prop="amount"/>
          <el-table-column align="center" label="库存结余(元)" prop="remainStock"/>
          <el-table-column align="center" label="关联单据编号" prop="relationNumber">
            <template #default="{row}">
              <span class="main-color">{{ row.relationNumber }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作人" prop="creatorName">
            <template #default="{row}">
              <span>{{ row.creatorName }}</span>
              <span>[{{ row.departmentName }}]</span>
            </template>
          </el-table-column>
        </table-view>

        <!--关联订单编号-->
        <detail-drawer ref="orderInfoRef" custom-title>
          <template #title>
            {{ rowData?.relationNumber }}
          </template>
          <template #contents>
            <orderInfo :id="rowData?.relationId"/>
          </template>
        </detail-drawer>

        <detail-drawer ref="businessFlowRef" custom-title>
          <template #title>
            {{ rowData?.relationNumber }}
          </template>
          <template #contents>
            <businessFlow :id="rowData?.relationId"/>
          </template>
        </detail-drawer>
      </div>
    </div>

  </div>
</template>

<script>
import {defineAsyncComponent, inject, onMounted, reactive, toRefs} from "vue";
import {useRoute, useRouter} from "vue-router";

export default {
  name: "Index",
  components: {
    businessFlow: defineAsyncComponent(() =>
        import("@CRM/views/commonView/businessFlow/index.vue")
    ),
    orderInfo: defineAsyncComponent(() =>
        import("@CRM/views/commonView/detailComponents/order/OrderInfo.vue")
    ),
  },
  setup() {
    const router = useRouter();
    const route = useRoute();
    const api = inject("api");
    const data = reactive({
      fromData: {
        val: JSON.parse(route.query.row),
      },
      tableData: [],
      obj: {
        productId: Number(route.query.ids),
        distributeId: Number(route.query.id),
      },
      rowData: null,
      orderInfoRef: null,
      businessFlowRef: null,
    });
    const handlBack = () => {
      router.go(-1);
    };

    const handlDetails = () => {
      api.stockSellStorage.STOCKSELLSTORAGE_DETAILS(data.obj).then((res) => {
        if (res.code === 0) {
          data.tableData = res.data.list;
        }
      });
    };

    // 单机表格
    const aloneClick = (row, column, event) => {
      data.rowData = row;
      if (column.label === "关联单据编号") {
        if (row.drpType === "receive") {
          data.orderInfoRef.open();
        }
        if (row.drpType === "out") {
          data.businessFlowRef.open();
        }
      }
    };

    // 鼠标样式
    const cellStyle = () => {
      return "cursor:pointer;";
    };

    onMounted(() => {
      handlDetails();
    });

    return {
      ...toRefs(data),
      handlBack,
      handlDetails,
      aloneClick,
      cellStyle,
    };
  },
};
</script>

<style scoped>
/* @import url(); 引入css类 */
</style>
